<template>
  <div class="layout">
    <el-container direction="vertical">
      <SysHeader />

      <el-container>
        <el-aside width="200px">
          <SysMenu />
        </el-aside>

        <el-container>
          <el-main :style="{height: mainHeight}"><router-view></router-view></el-main>

          <el-footer style="background: #aaa; color: #fff;">Footer</el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import SysMenu from '../components/SysMenu.vue';
import SysHeader from '../components/SysHeader.vue'

export default {
  name: 'LayoutView',
  data() {
    return {
      mainHeight: 200,
    }
  },
  components: {
    SysMenu,
    SysHeader
  },
  created() {
    this.mainHeight = window.innerHeight - 120 + 'px'
  }
}
</script>
